import bold from '@/assets/reportManage/bold.png';
import bold_active from '@/assets/reportManage/bold_active.png';
import italic from '@/assets/reportManage/italic.png';
import italic_active from '@/assets/reportManage/italic_active.png';
import left from '@/assets/reportManage/left.png';
import left_none from '@/assets/reportManage/left-none.png';
import right from '@/assets/reportManage/right.png';
import right_none from '@/assets/reportManage/right-none.png';
import center from '@/assets/reportManage/center.png';
import center_none from '@/assets/reportManage/center-none.png';
import top from '@/assets/reportManage/top.png';
import top_none from '@/assets/reportManage/top-none.png';
import bottom from '@/assets/reportManage/bottom.png';
import bottom_none from '@/assets/reportManage/bottom-none.png';
export const idToModule = {
  'moduleName': '模块名称',
  'moduleBorder': '边框配置',
  'moduleBackground': '背景配置',
  'tagTitle': '标题名称', // 概览标签的标签名称
  'tagContent': '内容文字', // 概览标签的内容
  'numberContent': '内容文字', // 翻页器的内容
  'showBit': '展示位数',
  'titleContent': '标题文字', // 标题模块
  'tableConfig': '表格配置',
  'tableMidConfig': '中部表格',
  'tableTailConfig': '首尾表格'
};
/**
 * useModule: 使用的模块，为空时所有都有用到
 * without: 排除某个模块
 */
export const styleConfig = [
  {
    title: '模块名称',
    id: 'moduleName',
    useModule: [],
    without: ['tag', 'ring'],
    extendClass: 'border',
    extendStyle: { marginBottom: '54px', height: '32px' },
    config: [
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#333',
        default: '#333'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 20,
        default: 20,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      },
      {
        name: 'Revealing',
        word: 'isHide',
        label: '标题',
        value: false,
        default: false
      },
      {
        name: 'Remark',
        word: 'RemarkOptions',
        label: '备注',
        maxlength: 50,
        value: { showRemark: false, value: '' },
        default: { showRemark: false, value: '' }
      },
      {
        name: 'FontStyle',
        word: 'FontStyle',
        label: '字体样式',
        value: ['bolder'],
        default: ['bolder'],
        extendClass: 'position-absolute',
        extendStyle: { left: '8px', top: '48px' },
        options: [{ value: 'italic', label: '倾斜', url: italic, activeUrl: italic_active }, { value: 'bolder', label: '加粗', url: bold, activeUrl: bold_active }]
      },
      {
        name: 'RadioBtn',
        word: 'textAlign',
        label: '水平位置',
        extendClass: 'position-absolute',
        extendStyle: { left: '165px', top: '48px' },
        value: 'left',
        default: 'left',
        options: [{ value: 'left', label: '左', url: left_none, activeUrl: left }, { value: 'center', label: '中', url: center_none, activeUrl: center }, { value: 'right', label: '右', url: right_none, activeUrl: right }]
      }
    ]
  },
  {
    title: '边框配置',
    id: 'moduleBorder',
    useModule: [],
    without: [],
    extendClass: 'border',
    config: [
      {
        name: 'ColorPicker',
        word: 'borderColor',
        label: '边框颜色',
        value: '#fff',
        default: '#fff'
      },
      {
        name: 'Select',
        word: 'borderWidth',
        label: '边框大小',
        value: 0,
        default: 0
      }
    ]
  },
  {
    title: '背景配置',
    id: 'moduleBackground',
    useModule: [],
    without: [],
    extendClass: 'border',
    config: [
      {
        name: 'ColorPicker',
        word: 'backgroundColor',
        label: '背景颜色',
        isGradient: false,
        gradientColor: '',
        value: '#fff',
        default: '#fff'
      },
      {
        name: 'upload',
        word: 'backgroundImage',
        label: '设置背景图片',
        value: '',
        typeComp: 'title'
      },
      {
        name: 'radioGroup',
        word: 'size',
        value: 'stretch',
        typeComp: 'title',
        default: 'stretch',
        options: [{
          label: 'stretch',
          name: '拉伸'
        }, {
          label: 'tile',
          name: '平铺'
        }, {
          label: 'center',
          name: '居中'
        }] // 平铺background-size: 100% 100%;  拉伸background-size:cover; 居中background-size:center;
      }
    ]
  },
  {
    title: '标题名称',
    id: 'tagTitle',
    extendClass: 'border',
    useModule: ['tag', 'ring'],
    config: [
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#333',
        default: '#333'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 16,
        default: 16,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      }
    ]
  },
  {
    title: '进度内容',
    id: 'contentText',
    useModule: ['ring'],
    extendClass: 'border',
    config: [
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 14,
        default: 14,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      }
    ]
  },
  {
    title: '目标文字',
    id: 'targetText',
    useModule: ['ring'],
    extendClass: 'border',
    config: [
      {
        name: 'Select',
        word: 'titleFontSize',
        label: '标题大小',
        value: 16,
        default: 16,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      }, {
        name: 'Select',
        word: 'dataFontSize',
        label: '数据大小',
        value: 24,
        default: 24,
        options: [12, 13, 14, 16, 20, 24, 28, 36, 48, 72],
        unit: 'px'
      }
    ]
  },
  {
    title: '内容文字',
    id: 'tagContent',
    extendClass: 'border',
    useModule: ['tag'],
    config: [
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#333',
        default: '#000'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 36,
        default: 12,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      }
    ]
  },
  {
    title: '内容文字',
    id: 'numberContent',
    useModule: ['number'],
    config: [
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#000',
        default: '#000'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 48,
        default: 12,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      }
    ]
  },
  {
    title: '展示位数',
    id: 'showBit',
    useModule: ['number', 'tag'],
    config: [
      {
        name: 'Select',
        word: 'number',
        extendClass: 'select-width-120',
        value: 9,
        default: 1,
        options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      }
    ]
  },
  {
    title: '标题文字',
    id: 'titleContent',
    useModule: ['title'],
    extendClass: 'border',
    config: [
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#000',
        default: '#000'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 12,
        default: 12,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      },
      {
        name: 'Revealing',
        word: 'isHide',
        label: '标题',
        value: false,
        default: false
      }
    ]
  },
  {
    title: '头部表格',
    id: 'tableTailConfig',
    useModule: ['table'],
    config: [
      {
        name: 'InputNumber',
        word: 'tableColumnHeight',
        min: 18,
        max: 200,
        label: '高度',
        value: 32,
        default: 32
      },
      {
        name: 'ColorPicker',
        word: 'headBgColor',
        label: '背景颜色',
        value: '#85A2FF',
        default: '#85A2FF'
      },
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#606266',
        default: '#606266'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 14,
        default: 14,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      }
    ]
  },
  {
    title: '中部表格',
    id: 'tableMidConfig',
    useModule: ['table'],
    config: [
      {
        name: 'InputNumber',
        word: 'tableColumnHeight',
        min: 18,
        max: 200,
        label: '高度',
        value: 32,
        default: 32
      },
      {
        name: 'ColorPicker',
        word: 'oddBgColor',
        label: '奇数行背景色',
        value: '#FFFFFF',
        default: '#FFFFFF'
      },
      {
        name: 'ColorPicker',
        word: 'evenBgColor',
        label: '偶数行背景色',
        value: '#F0F3FF',
        default: '#F0F3FF'
      },
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#606266',
        default: '#606266'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 14,
        default: 14,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      }
    ]
  },
  {
    title: '横轴样式',
    id: 'axisConfig_X',
    useModule: ['chart'],
    extendClass: 'border',
    extendStyle: { width: 'auto', marginBottom: '12px' },
    config: [
      {
        name: 'nomalSelect',
        word: 'rotate',
        width: '100px',
        label: '横轴样式',
        value: 0,
        default: 0,
        options: [{ value: 0, label: '横向文字' }, { value: -90, label: '纵向文字' }, { value: 45, label: '45°文字' }]
      },
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#606266',
        default: '#606266'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 14,
        default: 14,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      },
      {
        name: 'RadioBtn',
        word: 'Position',
        label: '位置',
        value: 'bottom',
        default: 'bottom',
        options: [{ value: 'top', label: '上', url: top_none, activeUrl: top }, { value: 'bottom', label: '下', url: bottom_none, activeUrl: bottom }]
      },
      {
        name: 'Text',
        word: 'AxisName',
        label: '名称',
        value: '',
        maxlength: 50
      }
    ]
  },
  {
    title: '纵轴样式',
    id: 'axisConfig_Y',
    useModule: ['chart'],
    extendClass: 'border',
    extendStyle: { width: 'auto' },
    config: [
      {
        name: 'nomalSelect',
        word: 'rotate',
        width: '100px',
        label: '纵轴样式',
        value: 0,
        default: 0,
        options: [{ value: 0, label: '横向文字' }, { value: -90, label: '纵向文字' }, { value: 45, label: '45°文字' }]
      },
      {
        name: 'ColorPicker',
        word: 'color',
        label: '字体颜色',
        value: '#606266',
        default: '#606266'
      },
      {
        name: 'Select',
        word: 'fontSize',
        label: '字体大小',
        width: '64px',
        value: 14,
        default: 14,
        options: [12, 13, 14, 16, 20, 28, 36, 48, 72],
        unit: 'px'
      },
      {
        name: 'RadioBtn',
        word: 'Position',
        label: '位置',
        value: 'left',
        default: 'left',
        options: [{ value: 'left', label: '左', url: left_none, activeUrl: left }, { value: 'right', label: '右', url: right_none, activeUrl: right }]
      },
      {
        name: 'Text',
        word: 'AxisName',
        label: '名称',
        value: '',
        maxlength: 50
      }
    ]
  },
  {
    title: '条形圆角值',
    noDot: true,
    id: 'barRadius',
    useModule: ['chart'],
    rowSpan: 10,
    config: [
      {
        name: 'InputNumber',
        word: 'borderRadius',
        min: 0,
        max: 1000,
        props: {
          precision: 0
        },
        label: '',
        value: 3,
        default: 3,
        width: '120px'
      }
    ]
  },
  {
    title: '折线平滑值',
    id: 'lineSmooth',
    noDot: true,
    useModule: ['chart'],
    rowSpan: 14,
    config: [
      {
        name: 'InputNumber',
        word: 'smooth',
        min: 0,
        max: 1,
        label: '',
        props: {
          step: 0.1,
          precision: 1
        },
        value: 0.5,
        default: 0.5,
        width: '120px'
      }
    ]
  },
  {
    title: '配置数据',
    noDot: true,
    noCenter: true,
    id: 'echartsConfig',
    useModule: ['chart'],
    config: [
      {
        name: 'textarea',
        word: 'value',
        value: ''
      }
    ]
  }
];
